<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>蘑菇街</title>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
          name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes"/> <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <!-- Mobile Devices Support @end -->
    <link href="../css/index.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
    <script src="../script/jquery-1.10.1.min.js"></script>
    <script src="../script/jquery.easing.min.js"></script>
    <script src="../script/main.js"></script>
    <script src="../script/jquery.rotate.min.js"></script>
    <script src="../script/api.js"></script>
    <script src="../script/settings.js"></script>
    <script src="../script/vue.js"></script>
    <script src="../script/axios.js"></script>
</head>

<body>
<div class="main" id="app">
    <!--头部-->
    <div class="header" id="bktop">
        <div class="logo"><a href="index.html"><img :src="siteconfig.logo"/></a></div>
        <div class="banner">
            <div class="close"><img id="img1" src="../image/banner01.gif"/></div>
            <div class="open hide"><img id="img2" src="../image/banner02.gif"/></div>
            <ul class="xla">
                <li v-for="top in nav_list">
                    <a class="dianj dj1" href="javascript:;"><font>{{top.name}}</font><img id="ig1"
                                                                                           src="../image/xiala.gif"/></a>
                    <div class="zilan">
                        <a v-for="son in top.children_list" href="">{{son.name}}</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearBoth"></div>
    </div>
    <!--资讯列表-->
    <div class="newsban">首页 > 产品分类 > {{current_category}}</div>
    <table class="newwclass">
        <tr class="juzhon">
            <td><a :class="paginate.category==0?'on':''" @click="paginate.category=0;current_category='全部商品'"
                   style="font-size: 15px">全部商品</a>
            </td>
            <td v-for="category in category_list">
                <a :class="paginate.category==category.id?'on':''"
                   @click="paginate.category=category.id;current_category=category.name" style="font-size: 15px">{{category.name}}</a>
            </td>
        </tr>
    </table>
    <div class="xlan"></div>
    <div class="case_list">
        <div class="case_list_body">
            <ul>
                <li :key="key" v-for="goods,key in paginate.items" :class="key%2==0?'yyu':'casela'">
                    <a href="#">
                        <div class="case_list_body_pic">
                            <img :src="goods.image_url">
                        </div>
                    </a>
                    <div class="case_list_info">
                        <p class="cast_list_tit"><a href="product.html">{{goods.title}}</a></p>
                    </div>
                </li>
                <div class="clearBoth"></div>
            </ul>
        </div>
        <!--分页-->
        <table class="page" v-if="paginate.pages > 1">
            <tr class="juzhon">
                <td v-if="paginate.has_prev && paginate.page>1"><a @click="paginate.page=1"><img
                        src="../image/first.gif"/></a></td>
                <td v-if="paginate.has_prev && paginate.page>1"><a @click="paginate.page-=1"><img
                        src="../image/pre.gif"/></a></td>
                <td v-if="paginate.has_prev && paginate.page>1"><a @click="paginate.page-=1">{{paginate.page-1}}</a>
                </td>
                <td><a class="on">{{paginate.page}}</a></td>
                <td v-if="paginate.has_next && paginate.page < paginate.pages"><a @click="paginate.page+=1">{{paginate.page+1}}</a>
                </td>
                <td v-if="paginate.has_next && paginate.page < paginate.pages"><a @click="paginate.page+=1"><img
                        src="../image/next.gif"/></a></td>
                <td v-if="paginate.has_next && paginate.page < paginate.pages"><a @click="paginate.page=paginate.pages"><img
                        src="../image/last.gif"/></a></td>
            </tr>
        </table>
    </div>
    <div class="backtop">
        <p id="dianj"><a href="#"><img src="../image/top.gif"/></a></p>
    </div>
    <!--底部-->
    <div class="bottom">
        <div class="bottom-top">
            <div class="linker">
                <div class="liuy">
                    <a href="message.html">
                        <div class="tubiao"><img src="../image/liuy.gif"/></div>
                        <div class="wenzi">在线留言</div>
                        <div class="clearBoth"></div>
                    </a>
                </div>
                <div class="clearBoth"></div>
            </div>
        </div>
        <div class="bottom-bot">{{siteconfig.copyright}}</div>
    </div>
</div>
</body>
<script type="text/javascript">
    apiready = function () {
        vm = new Vue({
            el: '#app',
            data: {
                current_category: '全部商品',
                siteconfig: {},
                category_list: [],  // 文章分类
                nav_list: [      // 导航菜单
                    {children_list: []},
                    {children_list: []},
                    {children_list: []},
                ],
                paginate: {
                    page: 1,
                    category: 0,
                    per_page: 100,
                    items: [],  // 当前页面的数据项
                },   // 分页器
                myfilter: {}
            },
            watch: {
                'paginate.page': function () {
                    this.get_list_goods()
                },
                'paginate.category': function () {
                    this.paginate.page = 1;
                    this.get_list_goods();
                }
            },
            mounted() {
                let category_id = api.pageParam.id;
                if (category_id > 0) {
                    this.paginate.category = category_id;
                }
                this.get_site_config();
                this.get_nav_list();
                this.get_goods_category();
                this.get_list_goods();
            },
            methods: {
                // 站点配置
                get_site_config() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "id": 188,
                        "method": "common.siteconfig",
                        "params": {}
                    }).then(response => {
                        this.siteconfig = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 商品分类
                get_goods_category() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "goods.goods_category",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.category_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 获取导航菜单
                get_nav_list() {
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "common.nav",
                        "params": {},
                        "id": 1
                    }).then(response => {
                        this.nav_list = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
                // 分页展示商品列表
                get_list_goods() {
                    this.myfilter = {
                        'per_page': this.paginate.per_page,
                    };
                    if (this.paginate.category > 0) {
                        this.myfilter.category = this.paginate.category;
                    }
                    if (this.paginate.page > 1) {
                        this.myfilter.page = this.paginate.page;
                    }
                    axios.post(settings.API, {
                        "jsonrpc": "2.0",
                        "method": "goods.list_goods",
                        "params": this.myfilter,
                        "id": 1
                    }).then(response => {
                        this.paginate = response.data.result;
                    }).catch(error => {
                        alert(JSON.stringify(error.response));
                    })
                },
            },
        })
    }
</script>
</html>